<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实训中心-失物招领</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

        h1,h3 {
            text-align: center;
            margin-top: 30px;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .search-bar {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .search-bar input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .search-bar input[type="submit"] {
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }

        th {
            background-color: #f2f2f2;
        }

        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination button {
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 5px;
        }

        .active {
            background-color: #333;
        }

        @media screen and (max-width: 600px) {
            .container {
                max-width: 100%;
                padding: 10px;
            }

            .search-bar input[type="text"] {
                flex-grow: 1;
                padding: 5px;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                margin-right: 5px;
                margin-bottom: 5px;
            }

            .search-bar input[type="submit"] {
                padding: 5px;
                font-size: 14px;
            }

            th, td {
                padding: 5px;
                font-size: 14px;
            }

            .pagination button {
                padding: 5px;
                font-size: 14px;
            }
        }

        .active {
            background-color: #333;
            color: white;
        }

    </style>
</head>
<body>
<h1>失物招领</h1>
<h3>所有失物请前往实训中心801领取</h3>
<div class="container">
    <div class="search-bar">
        <input type="text" id="location" placeholder="请输入地点">
        <input type="submit" value="地点搜索" onclick="searchByLocation()">
        <input type="text" id="description" placeholder="请输入描述信息">
        <input type="submit" value="描述信息搜索" onclick="searchByDescription()">
    </div>
    <table id="table">
        <thead>
        <tr>
            <th>描述信息</th>
            <th>地点</th>
            <th>状态</th>
            <th>发布时间<th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="pagination"></div>
</div>
<script src="/js/jQuery.js"></script>
<script src="/js/message.js"></script>
<script>

    // 数据存放
    let data = [];

    //总页码
    let totalPage=0;


    // 每页显示的数据量
    const pageSize = 5;

    // 当前页码
    let currentPage = 1;

    // 地点
    let locations = undefined;
    // 描述信息
    let description = undefined;

    function Htajax(currentPage,pageSize){
        data = [];
        $.ajax({
            url: '/lostandfound',
            type: 'post',
            data: {
                pageIndex: currentPage,
                pageSize:pageSize ,
                data: description,
                location:locations
            },
            async:false,  // 关闭异步
            dataType: "json",   // 预期返回一个 json 类型数据
            success: function (res) {
                // 只有请求成功（状态码为200）才会执行这个函数
                if (res.data===null){
                    $.message({type:'warning',content:res.msg});
                }else {
                    data.push(res.data.data);
                    totalPage=res.data.count;
                    locations =undefined;
                    description = undefined;
                }
            }
        });
    }





    // 根据地点搜索
    function searchByLocation() {
        locations = document.getElementById('location').value;
        Htajax((currentPage - 1) * pageSize, currentPage * pageSize);
        renderTable(data);
    }

    // 根据描述信息搜索
    function searchByDescription() {
        description = document.getElementById('description').value;
        Htajax((currentPage - 1) * pageSize, currentPage * pageSize);
        renderTable(data);
    }

    // 渲染表格
    function renderTable(data) {
        const tbody = document.querySelector('#table tbody');
        tbody.innerHTML = '';
        for (let i=0;i<data[0].length;i++){
            const tr = document.createElement('tr');
            tr.innerHTML = `
          <td>${data[0][i].data}</td>
          <td>${data[0][i].location}</td>
          <td class="${data[0][i].state === 0 ? 'red' : 'green'}">${data[0][i].state === 0 ? '未领取' : '已领取'}</td>
          <td >${data[0][i].postingtime}</td>
        `;
            tbody.appendChild(tr);
        }

        renderPagination();
    }

    // 渲染分页器
    function renderPagination() {
        const pagination = document.querySelector('.pagination');
        pagination.innerHTML = '';


        const prevButton = document.createElement('button');  // 创建 "<" 按钮
        prevButton.innerHTML = "&lt;";
        prevButton.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage -= 1;
                Htajax((currentPage - 1) * pageSize, currentPage * pageSize);
                renderTable(data);
            }
        });
        pagination.appendChild(prevButton);

        //parseInt(totalPage/5)求整数

        for (let i = 1; i <= (totalPage%5 === 0 ? parseInt(totalPage/5):parseInt(totalPage/5)+1); i++) {
            const button = document.createElement('button');
            button.innerHTML = i;
            button.addEventListener('click', () => {
                currentPage = i;
                Htajax((currentPage - 1) * pageSize, currentPage * pageSize);
                renderTable(data);
            });

            if (i === currentPage) {
                button.classList.add('active');
            }

            if (i === currentPage) {
                button.style.color = 'blue';
            }

            pagination.appendChild(button);
        }


        const nextButton = document.createElement('button');  // 创建 ">" 按钮
        nextButton.innerHTML = "&gt;";
        nextButton.addEventListener('click', () => {
            if (currentPage <= parseInt(totalPage/5)) {
                currentPage += 1;
                Htajax((currentPage - 1) * pageSize, currentPage * pageSize);
                renderTable(data);
            }
        });
        pagination.appendChild(nextButton);

        // 显示总页数和当前页码信息
        // const pageInfo = document.createElement('span');
        // pageInfo.innerHTML = ` 当前页：${currentPage} / 总页数：${totalPage}`;
        // pagination.appendChild(pageInfo);



    }

    // 加载Ajax
    Htajax(currentPage-1,pageSize);
    // 默认渲染第一页的数据
    renderTable(data);


</script>
</body>
</html>
